<template>
	<view class="">
		<view class="tips-view u-type-warning">
			<view class="u-flex u-m-b-10 u-font-28">
				<u-icon name="bell-fill" color="#FFAA44" size="32"></u-icon>
				<text>温馨提示</text>
			</view>
			<view class="u-font-24">
				为了您的合法权益不受损害，平台建议您在使用帮把关APP沟通前，仔细了解对方信息，谨防各类诈骗陷阱。
			</view>
		</view>
		<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" top="160">
			<view class="" v-for="(item,index) in msgList" :key="item.id">
				<u-swipe-action :index="index" :show="item.show" @click="deleteMsgItem" :options="actionBtns"
					@content-click="listItemClick" @open="openMenu">
					<view class="u-p-l-30 u-p-r-30">
						<view class="u-flex u-col-center u-p-t-30 u-p-b-30 u-border-bottom">
							<view class="u-relative">
								<u-avatar :src="item.avatar" :size="90" :show-level="item.is_power==1"
									:level-bg-color="config.mainColor"></u-avatar>
								<u-badge bgColor="#FF584E" :count="item.message_num" :offset="[0,0]"></u-badge>
							</view>
							<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
							<view class="u-m-l-15 u-flex-1">
								<view class="u-flex u-col-center u-m-b-10">
									<text class="u-font-32 font-medium u-m-r-14">{{item.name}}</text>
									<bb-tag v-if="item.is_real==1"></bb-tag>
									<view class="u-flex-1 align-right">
										<text class="u-font-20 u-light-color">{{formateTime(item)}}</text>
									</view>
								</view>
								<text class="u-type-info u-line-1">{{ item.message }}</text>
							</view>
						</view>
					</view>
				</u-swipe-action>
			</view>
		</mescroll-uni>
		<u-modal v-model="deleteModal" @confirm="deleteHandle" ref="deleteModal" :async-close="true" title="提醒"
			content="确定要删除此对话？" show-cancel-button :confirm-color="config.mainColor"></u-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				msgList: [],
				actionBtns: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				deleteModal: false,
				deletId: 0,
				config: this.$appConfig
			}
		},
		onLoad() {
			uni.$on('loginBack', () => {
				this.canUse = false;
			})
		},
		onShow() {
			uni.$off('pullmsg')
			if (this.canUse) {
				this.mescroll.resetUpScroll();
			}
			this.canUse = true
			this.webscoketServe()
		},
		onHide() {
			this.$store.dispatch('closeConnect')
			uni.$off('pullmsg')
		},
		methods: {
			formateTime(item) {
				const currentDate = new Date();
				const currentYear = currentDate.getFullYear();
				const currentMonth = currentDate.getMonth();
				const currentDay = currentDate.getDate();

				const targetDate = new Date(item._update_time)
				const targetYear = targetDate.getFullYear();
				const targetMonth = targetDate.getMonth();
				const targetDay = targetDate.getDate();
				if (currentYear === targetYear && currentMonth === targetMonth && currentDay === targetDay) {
					return item._time
				} else {
					return `${item._date} ${item._time}`
				}
			},
			upCallback(page) {
				this.queryMsgList(page)
			},
			queryMsgList(page) {
				this.$u.api.messageList({
					page: page.num,
					limit: page.size
				}).then(res => {
					res = res.map(item => ({
						...item,
						show: false
					}))
					this.msgList = page.num == 1 ? res : [...this.msgList, ...res];
					this.mescroll.endSuccess(res.length, res.length >= page.size);
				}).catch(err => {
					this.mescroll.endErr();
				})
			},
			webscoketServe() {
				uni.$on('pullmsg', (data) => {
					console.log('msg:', data);
					if (data.type == 'message_num') {
						const msg = data.data;
						if (msg.id) {
							const index = this.msgList.findIndex(item => item.id === msg.id);
							if (index >= 0) {
								this.msgList[index] = msg;
								this.$set(this.msgList, index, msg)
							} else {
								this.msgList.unshift(msg)
							}
						}
					}
					if (data.type == 'success') {
						this.$store.dispatch('sendMessage', {
							data: {},
							type: 'to_chat_list'
						})
					}
				})
				this.$store.dispatch('createConnect')
			},
			deleteMsgItem(index, index1) {
				const item = this.msgList[index];
				this.deletId = item.id;
				this.deleteModal = true
				console.log(index, index1);
			},
			deleteHandle() {
				this.$u.api.deleteMsg({
					id: this.deletId
				}).then(res => {
					this.$u.toast('对话已删除')
					this.deleteModal = false
					this.mescroll.resetUpScroll();
				})
			},
			listItemClick(index) {
				const item = this.msgList[index];
				let params = {
					uid: item.to_uid,
					name: item.name
				}
				if (item.demand_id) params['did'] = item.demand_id
				if (item.serve_id) params['sid'] = item.serve_id
				this.$u.route('/pages/subpage/message/chat', params)
			},
			openMenu(index) {
				this.msgList[index].show = true;
				this.msgList.map((val, idx) => {
					if (index != idx) {
						this.msgList[idx].show = false;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tips-view {
		background-color: #FBF3EA;
		padding: 15rpx 30rpx;
		height: 160rpx;
	}
</style>